<template>
  <el-drawer v-model="isDrawerShow" :title="drawerTitle" @closed="handleDrawerClosed" @open="handleDrawerOpen">
    <template #default>
      <el-form ref="formRef" :model="salaryItem" :rules="rules">
        <el-form-item v-if="salaryItem.salaryitem_id !== undefined" label="ID" prop="salaryitem_id">
          <el-text>{{ salaryItem.salaryitem_id }}</el-text>
        </el-form-item>
        <el-form-item label="名称" prop="salaryitem_name">
          <el-input v-model="salaryItem.salaryitem_name"/>
        </el-form-item>
        <el-form-item label="说明" prop="detail">
          <el-input v-model="salaryItem.detail" type="textarea"/>
        </el-form-item>
        <el-form-item label="类型" prop="salary_type">
          <el-radio-group v-model="salaryItem.salary_type">
            <el-radio :value="1">加项</el-radio>
            <el-radio :value="0">减项</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button type="primary" @click="handleConfirmClick">确定</el-button>
      <el-button @click="handleCancelClick">取消</el-button>
    </template>
  </el-drawer>
</template>
<script lang="ts" setup>
import SalaryItemRequest from "@/api/types/salary/SalaryItemRequest";
import {computed, ref} from "vue";
import {ElForm, ElMessage, FormRules} from "element-plus";
import {addSalaryItem, updateSalaryItem} from "@/api/salaryItem";
import {isAxiosError} from "axios";

const salaryItem = ref<SalaryItemRequest>({
  salary_type: 1
})
const isDrawerShow = defineModel<boolean>()
const props = defineProps<{ salaryItemToEdit?: SalaryItemRequest }>()
const emit = defineEmits<{
  addSuccess: []
  success: []
  updateSuccess: []
}>()
const drawerTitle = computed(() => salaryItem.value.salaryitem_id === undefined ? "新增薪资项" : "修改薪资项")
const formRef = ref<InstanceType<typeof ElForm>>()

const rules: FormRules = {
  salaryitem_name: [
    {
      required: true,
      message: "名称不能为空",
      trigger: "blur"
    }
  ],
  salary_type: [
    {
      required: true,
      message: "类型不能为空",
      trigger: "change"
    }
  ],
}

function handleCancelClick() {
  isDrawerShow.value = false
}

function handleConfirmClick() {
  formRef.value?.validate(async (isValid) => {
    if (isValid) {
      try {
        if (salaryItem.value.salaryitem_id === undefined && salaryItem.value.salaryitem_name !== undefined) {
          const {code, msg} = await addSalaryItem(salaryItem.value.salaryitem_name)
          if (code === "200") {
            ElMessage.success(msg)
            emit("addSuccess")
          } else {
            ElMessage.error(msg)
          }
        } else {
          const {code, msg} = await updateSalaryItem(salaryItem.value)
          if (code === "200") {
            ElMessage.success(msg)
            emit("updateSuccess")
          } else {
            ElMessage.error(msg)
          }
        }
        isDrawerShow.value = false;
        emit("success")
      } catch (error) {
        if (isAxiosError(error) && error.response?.data.message != undefined) {
          ElMessage.error(error.response?.data.message);
        }
      }
    }
  })
}

function handleDrawerClosed() {
  formRef.value?.resetFields()
  salaryItem.value = {}
}

function handleDrawerOpen() {
  if (props.salaryItemToEdit !== undefined) {
    salaryItem.value.salaryitem_id = props.salaryItemToEdit.salaryitem_id
    salaryItem.value.salaryitem_name = props.salaryItemToEdit.salaryitem_name
  }
}
</script>
